<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>讲师列表</title>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.css" rel="stylesheet">
</head>

<body>
    <div id="app">
        <el-button type="danger">危险按钮</el-button>
        <table>
            <tr v-for="item in teacherList">
                <td>{{item.name}}</td>
                <td>{{item.level}}</td>
            </tr>
        </table>

        <el-table :data="teacherList" style="width: 100%">
            <el-table-column prop="id" label="id" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="level" label="级别">
                <template slot-scope="scope">
                    <span v-if="scope.row.level === 1">高级讲师</span>
                    <span v-if="scope.row.level === 2">首席讲师</span>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- <script src="../vue.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                teacherList: []
            },
            created() {
                this.getTeacherList2()
            },
            methods: {
                getTeacherList() {
                    console.log('获取讲师列表')
                    axios.get('http://localhost:8110/admin/edu/teacher/list').then(resp => {
                        console.log(resp)
                        this.teacherList = resp.data.data.items
                    })
                },

                // 基础配置:  返回值是一个函数
                initRequest() {
                    return axios.create({
                        baseURL: 'http://localhost:8110',
                        timeout: 5000
                    })
                },

                // api 调用
                teacherListApi() {
                    let request = this.initRequest()
                    return request({
                        url: '/admin/edu/teacher/list',
                        method: 'get'
                    })
                },

                // 数据渲染
                getTeacherList2() {
                    this.teacherListApi().then(response => {
                        this.teacherList = response.data.data.items
                    }).catch(error => {
                        console.log(error)
                    })
                }

            },
        })
    </script>
</body>

</html>